<script setup>
import VMdPreview from '@kangc/v-md-editor/lib/preview'
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js'
import Prism from 'prismjs'
import createKatexPlugin from '@kangc/v-md-editor/lib/plugins/katex/cdn'
import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index'
import createMermaidPlugin from '@kangc/v-md-editor/lib/plugins/mermaid/cdn'
import createTodoListPlugin from '@kangc/v-md-editor/lib/plugins/todo-list/index'
import createLineNumbertPlugin from '@kangc/v-md-editor/lib/plugins/line-number/index'
import createHighlightLinesPlugin from '@kangc/v-md-editor/lib/plugins/highlight-lines/index'
import '@kangc/v-md-editor/lib/theme/style/vuepress.css'
import '@kangc/v-md-editor/lib/style/base-editor.css'
import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css'
import '@kangc/v-md-editor/lib/theme/style/github.css'
import '@kangc/v-md-editor/lib/style/preview.css'
import '@kangc/v-md-editor/lib/plugins/mermaid/mermaid.css'
import '@kangc/v-md-editor/lib/plugins/todo-list/todo-list.css'
import '@kangc/v-md-editor/lib/plugins/highlight-lines/highlight-lines.css'

VMdPreview.use(vuepressTheme, { Prism })
VMdPreview.use(createHighlightLinesPlugin())
VMdPreview.use(createMermaidPlugin())
VMdPreview.use(createKatexPlugin())
VMdPreview.use(createCopyCodePlugin())
VMdPreview.use(createLineNumbertPlugin())
VMdPreview.use(createTodoListPlugin())
const { text } = defineProps(['text'])
</script>

<template>
    <v-md-preview :text="text"></v-md-preview>
</template>
